<template>
  <div class="container">
    <!-- header -->
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="i el-icon-odometer">&nbsp;&nbsp;户表管理</i>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="tabsChange">
        <el-tab-pane label="抄表状态" name="first">
          <v-meterState></v-meterState>
        </el-tab-pane>
        <el-tab-pane label="故障诊断" name="second">
          <v-faultDiagnosis></v-faultDiagnosis>
        </el-tab-pane>
        <el-tab-pane label="出厂水表状态" name="third">
          <v-meterCheck></v-meterCheck>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import bus from "./bus";
import vMeterState from "./NBMeterState/home";
import vFaultDiagnosis from "./NBFaultDiagnosis/NBFaultDiagnosis";
import vMeterCheck from "./NBMeterCheck";
export default {
  data() {
    return {
      activeName: "first"
    };
  },
  methods: {
    tabsChange(value) {
      if (value.name === "first") {
        this.$store.dispatch("meterReadingManagement/commitFlag", true);
      }
      bus.$emit("tabsChange", value.name);
    }  
  },
  components: {
    vMeterState,
    vFaultDiagnosis,
    vMeterCheck,
  }
};
</script>

<style scoped>
.i {
  padding-top: 0.4em;
  float: left;
  font-size: 2em;
}
</style>